<template>
  <div class="authentication">
    <div class="com-top-nav">
      <van-nav-bar
        title="发布任务"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <van-cell-group>
        <van-field
          v-model="formData.name"
          required
          clearable
          label="任务名称"
          placeholder="请输入任务名称"
        />
          <van-field
          type="textarea"
          v-model="formData.describe"
          clearable
          :autosize="{maxHeight: '100', minHeight: '100'}"
          placeholder="请输入任务描述"
        />
        <zx-time-picker title="截止时间"
                        :required="true"
                        dateType="datetime"
                        v-model="formData.deadline"
                        timeFormat="YYYY-MM-DD HH:mm">
        </zx-time-picker>
        <zx-picker title="任务周期" :dataList="timeList" v-model="formData.time"></zx-picker>
        <van-field
          v-model="formData.price"
          required
          clearable
          label="任务定价"
          placeholder="请输入任务定价(元)"
        />
        <zx-picker title="任务类型" :dataList="skillList" v-model="formData.skill"></zx-picker>
       <!--   <van-field
          v-model="formData.detailArea"
          label="企业详细地址"
          placeholder="请输入企业详细地址"
          required
        /> -->
        <van-field
          v-model="formData.link"
          required
          clearable
          label="参考链接"
          placeholder="请输入参考链接"
        />
        <!-- <p class="add-link">添加链接选项</p> -->

         <van-cell class="is-require" :value="formData.area" title="工作地址" is-link @click="showArea = true" />
        <van-popup v-model="showArea" position="bottom" :overlay="false">
        <van-area :area-list="areaList"  @confirm="confirm" value="140400" @cancel="cancel" :columns-num="2" title="选择地址" />
        </van-popup>
        <p class="cell-group-tips">参考材料</p>
        <!-- <p class="field-title-tips">请根据个人需要选择是否上传图片，最多3张</p> -->
        <!-- <zx-upload-img action="" :max-count="3" :multiple="true" :max-size="1024000" v-model="formData.imgList"></zx-upload-img> -->
        <div class="box1">
          <img @click="clickimg1" v-show="imgurl1" :src="imgurl1" alt="">
          <img v-show="imgurl2" :src="imgurl2" alt="">
          <div>
            <van-uploader v-show="!imgurl1" :after-read="onRead">
            <van-icon name="photograph" />
          </van-uploader>
         </div>
          <div>
            <van-uploader v-show="!imgurl2" :after-read="onRead2">
            <van-icon name="photograph" />
          </van-uploader>
         </div>
        </div>

        <!-- <p class="add-link">添加链接选项</p> -->
      </van-cell-group>
      <div class="button">
        <van-button size="large" @click="handleSubmit">发布</van-button>
      </div>

    </div>
  </div>
</template>
<script>
  import validator from '../../common/validatorFunction';
  import zxPicker from '../../components/zx-picker';
  import areaList from '../../../static/js/area'
  import zxUploadImg from '../../components/zx-upload-img.vue';
  import zxTimePicker from '../../components/zx-time-picker.vue';
  import {Area, Popup} from 'vant';
  export default {
    name: 'preferences',
    components: {
      zxPicker,
      zxUploadImg,
      zxTimePicker,
       vanArea: Area,
      vanPopup: Popup
    },
    data(){
      return {
        isShowError: false,
        errorTips: '',
        areaList: areaList,
        imgurl1:'',
        imgurl2:'',
        showArea: false,
        timeList: [{values: [ '一天','二天','三天','四天','五天','六天','一周','二周','三周','四周','一个月','二个月','三个月']}],
        skillList: [{values: ['线下兼职', '线上兼职', '技能兼职','其他兼职']}],
        statusList: [{values: ['艺术', '其他', '等等']}],
        formData: {
          time: [],
          skill: [],
          describe:'',
          status: [],
          price:'',
          demand:'',
          cut_time:'',
          link:'',
           area: '',
          detailArea: '',
          imgList: ['https://img.yzcdn.cn/2.jpg'],
          deadline: '2018-08-08 11:22'
        },

      }
    },
    mounted() {
      // a
    },
    methods: {
      clickimg1(){
        this.imgurl1 = ''
      },
      onClickLeft() {
        this.$router.go(-1);
      },
      onRead(file){
        console.log(file)
        let _this =this;
        // this.imgurl1 = file.content
        let Form = new FormData();
        Form.append('avatar', file.file);
        this.axios.post('/api/upload',Form).then(res=>{
          if(res.data.err_code ==0){
            this.imgurl1 = res.data.data.imgUrl;
            console.log(res.data.data.imgUrl)
          }
        })
      },
       onRead2(file){
         let _this =this;
         // this.imgurl1 = file.content
         let Form = new FormData();
         Form.append('avatar', file.file);
         this.axios.post('/api/upload',Form).then(res=>{
           if(res.data.err_code ==0){
             this.imgurl2 = res.data.data.imgUrl;
           }
         })
      },
        confirm(columnsNum) {
        this.showArea = false;
        let area = '';
        columnsNum.forEach(item => {
          area += item.name + ' ';
          console.log(item)
        })
        this.formData.area = area;
      },
      cancel() {
        this.showArea = false;
      },
      handleSubmit() {
        if(!this.formData.name){
          this.$toast({message: '请输入任务标题', position: 'middle'});
          return
        }
          if(!this.formData.describe){
          this.$toast({message: '请输入任务描述', position: 'middle'});
          return
        }
         if(!this.formData.time){
          this.$toast({message: '请选择任务周期', position: 'middle'});
          return
         }
          if(!this.formData.skill){
          this.$toast({message: '请选择任务类型', position: 'middle'});
          return
         }
        let params = {
          name:this.formData.name,
          time:this.formData.time[0],
          cut_time:this.formData.deadline,
          uid:JSON.parse(sessionStorage.getItem('user')).uid,
          describe:this.formData.describe,
          price:this.formData.price,
          links1:this.formData.link,
          img_url1:this.imgurl1,
          img_url2:this.imgurl2,
          address:this.formData.area,
          type:this.formData.skill[0]
        }
        if(!params.name || !params.time || !params.cut_time || !params.describe ||!params.price ||!params.type){
          this.$toast({message:'请填写完整的信息再提交~'});
          return;
        };
        if(params.price <1){
          this.$toast({message:'金额不能小于1元~'});
          return;
        }
        this.axios.get('/api/createTask',{params:params}).then((result) => {

          if(result.data.err_code == 0){
            this.$toast({message:'恭喜发布成功'})

            this.$router.replace({name:'index'})
          }
        }).catch((err) => {
          this.$toast({message:err.data.err_msg})
        });
        // 保存数据
       /*  const rulesResult = validator(this.formData, this.rules);
        console.log(rulesResult);
        if (rulesResult.result) {
          校验成功，保存信息
          const res = await server.postIdData(this.formData);
          if (res && res.data && res.data.code === 200) {
              this.$router.push('/information-data');
          }
        } else {
          const alertMessage = [];
          for (const key in rulesResult.detail) {
            if (!rulesResult.detail[key].isPass) {
              alertMessage.push(rulesResult.detail[key].message);
            }
          }
          this.isShowError = true;
          this.errorTips = alertMessage[0];
          this.$toast({message: this.errorTips, position: 'middle'});
        } */
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../../static/style/var');

  .button {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 30px;
  }
  .cell-group-tips {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: @weak-tips-color;
    padding: 10px 15px;
  }
  .add-link {
    padding: 10px 15px;
    color: #266cee;
    font-size: @normal-font-size;
    line-height: 150%;
    text-align: left;
  }
  .box1{
    display: flex;
    padding-bottom: 20px;
    img{
      border-radius: 3px;
      margin-left: 20px;
        height: 50px;
        width: 110px;
      }
    div{
      margin-left: 10px;

    }
  }
</style>
